<template>
  <div class="main">
    <div :class="containerClass">
      <!--  注册框  -->
      <div class="container_form container--signup">
        <h1 class="title">注册账号</h1>
        <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="100px" class="demo-ruleForm myForm">
          <el-form-item label="注册账号" prop="username">
            <el-input type="text" v-model="registerForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="注册密码" prop="password">
            <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="registerForm.sex">
              <el-radio-button label="男"></el-radio-button>
              <el-radio-button label="女"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="注册类型" prop="register_type">
            <el-radio-group v-model="registerForm.role">
              <el-radio-button label="农户"></el-radio-button>
              <el-radio-button label="专家"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="真实姓名" prop="name">
            <el-input type="text" v-model="registerForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telephone">
            <el-input type="text" v-model="registerForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input type="email" placeholder="请输入内容" v-model="registerForm.email" autocomplete="off">
              <template slot="append">.com</template>
            </el-input>
          </el-form-item>
          <el-form-item label="快递地址" prop="address">
            <el-input type="text" v-model="registerForm.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item v-show="registerForm.role === '专家'" label="证件号" prop="license">
            <el-input type="text" v-model="registerForm.license" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="btn-wrapper">
            <el-button class="myBtn" type="primary" @click="submitRegisterForm('registerForm')">注册</el-button>
            <el-button class="myBtn" @click="resetForm('registerForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

<!--   登录框   -->
      <div class="container_form container--login">
        <h1 class="title">欢迎登录</h1>
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm myForm">
          <el-form-item label="账号" prop="username">
            <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="btn-wrapper">
            <el-button class="myBtn" type="primary" @click="submitLoginForm">登录</el-button>
            <el-button class="myBtn" @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="container_overlay">
        <div class="overlay">
          <div class="overlay_panel overlay--left">
            <button class="btn" id="login" @click="goto_login">已有帐号,直接登录</button>
          </div>

          <div class="overlay_panel overlay--right">
            <button class="btn" id="register" @click="goto_register">没有账号,点击注册</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import request from "@/utils/request";

export default {
  name: "Login",
  data(){
    let validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      } else {
        if (this.loginForm.password !== '') {
          this.$refs.loginForm.validateField('checkPass');
        }
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    let validateLicense = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入证件号'));
      } else {
        callback();
      }
    };

    let validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入真实姓名'));
      } else {
        callback();
      }
    };

    let validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'));
      } else {
        callback();
      }
    };

    let validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱地址'));
      } else {
        callback();
      }
    };

    let validateAddress = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入快递地址'));
      } else {
        callback();
      }
    };

    return{
      containerClass:['container'],
      loginForm: {
        username: '',
        password: ''
      },
      registerForm:{
        uid:null,
        username:'',
        password:'',
        role:'',
        sex:'',
        name:'',
        phone:'',
        email:'',
        address:'',
        license:''
      },
      rules: {
        username: [
          { validator: validateUser, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        name: [
          { validator: validateName, trigger: 'blur' }
        ],
        phone: [
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        address: [
          { validator: validateAddress, trigger: 'blur' }
        ],
        license: [
          { validator: validateLicense, trigger: 'blur' }
        ],
      },
    }
  },
  watch:{
    "registerForm.role":{
      handler(newValue,oldValue){
        if (newValue === "专家") this.registerForm.license = ""
        else this.registerForm.license = "1"
      }
    }
  },
  methods:{
    goto_login(){
      this.containerClass.pop()
    },
    goto_register(){
      this.containerClass.push('right-panel-active')
    },
    async submitLoginForm() {
      await this.login(this.loginForm)
      if (this.loginUser.isLogin){
        this.$message({
          message: `登陆成功！欢迎您，${this.loginUser.username}`,
          type: 'success',
          center:true
        })

        await this.$router.push({
          path: '/',
        })
      }else{
        this.$message({
            message: this.loginUser.msg,
            type: 'error',
            center:true
        })
      }
    },
    submitRegisterForm(formName){
      if (this.registerForm.sex === ''){
        return this.$message({
          message: '警告，请选择您的性别',
          type: 'warning',
          center:true
        })
      }else if (this.registerForm.role===''){
        return this.$message({
          message: '警告，请选择您注册的类型',
          type: 'warning',
          center:true
        })
      }else{
        console.log(this.registerForm)
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if (this.registerForm.role === '专家'){
              await request.post("/crop/user/register",this.registerForm).then(
                  response=>{
                    if (response.code === 0){
                      this.$message.error(response.msg)
                      return false
                    }
                    else {
                      this.registerForm.uid = response.id
                      request.post("/crop/expert/addExpert",this.registerForm)
                    }
                    this.$message.success("专家注册成功,请登录")
                  }
              )

              await request.post("/crop/user/login",this.registerForm)
            }else {
              await request.post("/crop/user/register",this.registerForm).then(
                  response=>{
                    if (response.code === 0){
                      this.$message.error(response.msg)
                      return false
                    }
                    this.registerForm.uid = response.id
                    request.post("/crop/farmer/addFarmer",this.registerForm)
                    this.$message.success("农户注册成功,请登录")
                  }
              )

            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapActions('user',{login:'login'})
  },
  computed:{
    ...mapState('user',['loginUser']),
  }
}
</script>

<style lang="css" scoped>
  .main{
    width: 100%;
    height: 100vh;
    align-items: center;
    background: #e9e9e9 url("../assets/pic/pic1.jpg") no-repeat fixed center;
    background-size: cover;
    display: grid;
    place-items: center;
  }

  .container{
    background-color: #e9e9e9;
    border-radius: 0.7rem;
    box-shadow: 0 0.9rem 1.7rem rgba(0,0,0,0.5);
    height: 600px;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    width:100%
  }

  .container_form{
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.6s ease-in-out;
    overflow: scroll;
  }

  .container_form + .container_form{
    overflow: hidden;
  }

  .container--login{
    opacity: 1;
    left: 0;
    width: 50%;
    z-index: 2;
    margin-top: 30px;
  }

  .title{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    text-align: center;
  }

  .container_overlay .btn{
    width: 250px;
    height: 80px;
    color: #fff;
    font-weight: bold;
    font-size: larger;
    background-image: linear-gradient(to right,#0367a6 0%,#008997 50%);
    border-radius: 40px;
    border: 1px solid #0367a6;
  }

  .btn-wrapper{
    text-align: center;
  }

  .container_form .myBtn{
    width: 150px;
    height: 50px;
    color: #fff;
    font-weight: bold;
    background-image: linear-gradient(to right,#0367a6 0%,#008997 50%);
    border-radius: 25px;
    border: 1px solid #0367a6;
    margin: 0 20px;
    font-size: medium;
  }

  .container_overlay .btn:active,.container_form .myBtn:active{
    transform: scale(0.9);
  }

  .myForm{
    height: 100%;
    margin-right: 50px;
    margin-top: 80px;
  }

  .right-panel-active .container--login{
    opacity: 0;
    transform: translateX(100%);
  }

  .container--signup{
    left: 0;
    opacity: 0;
    width: 50%;
    z-index: 2;
    margin-top: 30px;
  }

  .right-panel-active .container--signup{
    animation: show 0.6s;
    opacity: 1;
    transform: translateX(100%);
    z-index: 5;
  }

  .container_overlay{
    height: 100%;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: transform 0.6s ease-in-out;
    width: 50%;
    z-index: 100;
  }

  .right-panel-active .container_overlay{
    transform: translateX(-100%);
  }

  .overlay{
    background: #008997 url("../assets/pic/pic1.jpg") no-repeat fixed center;
    background-size: cover;
    height: 100%;
    left: -100%;
    position: relative;
    transition: transform 0.6s ease-in-out;
    width: 200%;
  }

  .right-panel-active .overlay{
    transform: translateX(50%);
  }

  .overlay_panel{
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    width: 50%;
  }

  .overlay--left{
    left: 0;
    transform: translateX(-20%);
  }

  .right-panel-active .overlay--left{
    transform: translateX(0);
  }

  .overlay--right{
    right: 0;
    transform: translateX(0);
  }

  .right-panel-active .overlay--right{
    right: 0;
    transform: translateX(20%);
  }

  @keyframes show {
    0%,
    49.99%{
      opacity: 0;
      z-index: 1;
    }

    50%,
    100%{
      opacity: 1;
      z-index: 5;
    }
  }
</style>